import React, { Component } from 'react';
import Header from './components/Header/Header';
import List from './components/List/List';
import Footer from './components/Footer/Footer';
import './App.css';
export default class App extends Component {
  state = {
    list: JSON.parse(localStorage.getItem('todo')) || [],
  };
  // 定义函数:获取header标签里面输入的内容
  // 子组件将要调用这个函数：目的是让调用的时候可以把state里面的list里面的数据改了,得到新数据需要两个容器：obj装一份数据，newlist装 原有的数据和新加入的obj数据
  getTodoName = (todoName) => {
    const newList = [...this.state.list];
    const obj = {
      id: Date.now(),
      todoName: todoName,
      isDone: false,
    };
    newList.push(obj);
    this.setState({ list: newList });
  };
  // 定义函数:改变list里面的item里面的input-checkbox里面的状态
  // 需要通过id找到对应的一条数据,然后给它的isDone取反,直接改变newList数组
  // 使用数组的方法-filter
  checkedChange = (id) => {
    const newList = [...this.state.list];
    newList.filter((item) => {
      if (item.id === id) item.isDone = !item.isDone;
      return item;
    });
    this.setState({ list: newList });
  };
  // 定义函数:删除选中的指定id的一条todoname
  // 要删掉指定id的一条数据,先知道那条数据的索引,再使用splice方法,指定索引删除一条数据XXX
  // 直接使用过滤函数,返回id不同的数据,去掉id相同的item
  delTodoName = (id) => {
    const newList = this.state.list.filter((item) => {
      return item.id !== id;
    });
    this.setState({ list: newList });
  };
  // 定义函数,执行后更改所有的todo里面的checked状态-规则是:
  // 当list里面但凡有一条的todoname是不被选中的,这个函数让所有的改为选中
  // 如果都是选中,就取反
  change_all = () => {
    const isAll = this.state.list.every((item) => {
      return item.isDone;
    });
    const newList = this.state.list.map((item) => {
      item.isDone = !isAll;
      return item;
    });
    this.setState({ list: newList });
  };
  // 编辑提交:更新一条数据,在input输入后回车提交到这
  // 根据id ,更新一条数据
  updateTodo = (id, newTodoName) => {
    const newList = this.state.list.map((item) => {
      if (item.id === id) {
        item.todoName = newTodoName;
        item.isDone = false;
      }
      return item;
    });
    this.setState({ list: newList });
  };

  // 定义函数,清除所有已完成项
  // 过滤掉已经完成的todoName
  clear_All_checked = () => {
    const newList = this.state.list.filter((item) => {
      return item.isDone === false; // 状态为未完成的留下
    });
    this.setState({ list: newList });
  };
  render() {
    /* 每当根组件渲染的时候，都收集一次数据到localStorage里面,当没有数据的时候返回空数组 */
    const { list } = this.state;
    localStorage.setItem('todo', JSON.stringify(list)); /* 一个装满数据对象的数组 */

    return (
      <div className="todo-container">
        <div className="todo-wrap">
          {/* #Header这里需要通过标签属性props的方式,传输一个函数进去 */}
          <Header getTodoName={this.getTodoName}></Header>
          <div>
            <List
              list={list}
              checkedChange={this.checkedChange}
              delTodoName={this.delTodoName}
              updateTodo={this.updateTodo}
            ></List>
            <Footer list={list} change_all={this.change_all} clear_All_checked={this.clear_All_checked}></Footer>
          </div>
        </div>
      </div>
    );
  }
}
